<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="author" content="ThemeFuse">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dark Velvet | Index</title>

<!-- main JS libs -->
<script src="js/libs/modernizr.min.js"></script>
<script src="js/libs/jquery-1.10.0.js"></script>
<script src="js/libs/jquery-ui.min.js"></script>
<script src="js/libs/bootstrap.min.js"></script>

<!-- Style CSS -->
<link href="style.less" media="screen" rel="stylesheet/less" type="text/css">

<!-- scripts -->
<script src="js/general.js"></script>
<!-- styled select -->
<script src="js/cusel-min.js"></script>
<!-- custom input -->
<script src="js/jquery.customInput.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- Placeholders -->
<script type="text/javascript" src="js/jquery.powerful-placeholder.min.js"></script>
<!-- Progress Bars -->
<script src="js/progressbar.js"></script>
<!-- Calendar -->
<script src="js/jquery-ui.multidatespicker.js"></script>
<!-- Graph Builder -->
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery.flot.js"></script>
<script type="text/javascript" src="js/jquery.flot.resize.js"></script>
<script type="text/javascript">
    $(function() {
        var graphwidth = $('.widget_graph .inner').width();
        $('.widget_graph .graph').css('height', parseInt(graphwidth/1.7));
        $(window).resize(function() {
            graphwidth = $('.widget_graph .inner').width();
            $('.widget_graph .graph').css('height', parseInt(graphwidth/1.7));
        });

        var d1 = [[0, 9], [1, 23], [1.8, 7], [2.2, 24], [2.8, 18], [4, 36]];
        var graphholder = $("#graph");
        var plot = $.plot(graphholder, [d1], {
            colors: ["#c06030", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
            xaxis: {
                min: null,
                max: null
            },
            yaxis: {
                autoscaleMargin: 0.02
            },
            series: {
                lines: {
                    show: true,
                    lineWidth: 5,
                    fill: true,
                    fillColor: "rgba(69,144,161,0.1)"
                },
                points: {
                    show: true,
                    radius: 5,
                    lineWidth: 3,
                    fillColor: "#f3d4a4"
                }
            },
            grid: {
                hoverable: true,
                clickable: true,
                margin: 12,
                color: "#79889a",
                borderColor: "#79889a"
            }
        });

        function showTooltip(x, y, contents) {
            $("<div id='graph-tooltip'>" + contents + "</div>").css({top: y - 40, left: x - 22}).appendTo("body").fadeIn(200);
        };

        var previousPoint = null;
        $("#graph").bind("plothover", function (event, pos, item) {

            if (item) {
                if (previousPoint != item.dataIndex) {

                    previousPoint = item.dataIndex;

                    $("#graph-tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY, '$' + y*100);
                }
            } else {
                $("#graph-tooltip").remove();
                previousPoint = null;
            }
        });
    });
</script>

<!-- range sliders -->
<script src="js/jquery.slider.bundle.js"></script>
<script src="js/jquery.slider.js"></script>
<!-- Visual Text Editor -->
<script src="js/nicEdit.js"></script>
<!-- Volume, Balance -->
<script type="text/javascript" src="js/knobRot-0.2.2.js"></script>
<!-- Video Player -->
<script src="js/video.js"></script>
<!-- Audio Player  -->
<script src="js/jquery.jplayer.min.js"></script>
<script src="js/jplayer.playlist.min.js"></script>
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function(){

        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        }, [
            {
                title:"<img src='images/temp/music-player1.png' alt='' /><ul><li class='item-artist'><span>01.</span>Rudimental</li><li class='item-song'>Waiting All Night (feat. Ella Eyre)</li><li class='item-album'>Folllow Your Heart | 2013</li></ul>",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
            },
            {
                title:"<img src='images/temp/music-player2.png' alt='' /><ul><li class='item-artist'><span>02.</span>Daft Punk</li><li class='item-song'>Get Lucky (ft. Pharell Williams)</li><li class='item-album'>Tron Legacy | 2013</li></ul>",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg"
            },
            {
                title:"<img src='images/temp/music-player3.png' alt='' /><ul><li class='item-artist'><span>03.</span>Justin Timberlake</li><li class='item-song'>Mirrors</li><li class='item-album'>20/20 Experience | 2013</li></ul>",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
            }
        ], {
            swfPath: "js",
            supplied: "oga, mp3",
            wmode: "window",
            smoothPlayBar: false,
            keyEnabled: false
        });
    });
    //]]>
</script>

<!-- Scroll Bars -->
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
	jQuery(function()
	{
		jQuery('.scrollbar').jScrollPane({
			verticalDragMaxHeight: 39,
			verticalDragMinHeight: 39
		});

		jQuery('.scrollbar.style2').jScrollPane({
			verticalDragMaxHeight: 36,
			verticalDragMinHeight: 36
		});
	});
</script>

<!-- Multiselect -->
<script src="js/jquery.chosen.min.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#contact_name').chosen({ width: "100%" });
    });
</script>

<!-- LESS -->
<script src="js/libs/less.js"></script>

<!--[if lt IE 9]><script src="js/respond.min.js"></script><![endif]-->
<!--[if gte IE 9]>
<style type="text/css">
    .gradient, .nicEdit-container {filter: none !important;}
</style>
<![endif]-->
</head>

<body>
<div class="body_wrap">
    <div class="container">

        <!-- content -->
        <div class="content " role="main">

            <!-- row -->
            <div class="row">
                <div class="col-sm-8">
                    <h6 class="foo">Menu</h6>

                    <!-- Website Menu -->
                    <div class="dropdown-wrap boxed-velvet">
                        <ul class="dropdown inner clearfix">
                            <li class="menu-level-0"><a href="#"><span>Account</span></a></li>
                            <li class="menu-level-0"><a href="#"><span>About Us</span></a>
                                <ul class="submenu-1">
                                    <li class="menu-level-1"><a href="#">Portfolio</a></li>
                                    <li class="menu-level-1"><a href="#">Testimonials</a></li>
                                    <li class="menu-level-1"><a href="#">Contacts</a>
                                        <ul class="submenu-2">
                                            <li class="menu-level-2"><a href="#">Gallery images</a></li>
                                            <li class="menu-level-2"><a href="#">OneByOne Slider</a></li>
                                            <li class="menu-level-2"><a href="#">Video in header</a></li>
                                            <li class="menu-level-2"><a href="#">Image &amp; Video Slider</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-level-0"><a href="#"><span>Settings</span></a>
                                <ul class="submenu-1">
                                    <li class="menu-level-1"><a href="#">Privacy Policy</a></li>
                                    <li class="menu-level-1"><a href="#">Copyright</a></li>
                                    <li class="menu-level-1"><a href="#">Terms of Service</a>
                                        <ul class="submenu-2">
                                            <li class="menu-level-2"><a href="#">Gallery images</a></li>
                                            <li class="menu-level-2"><a href="#">OneByOne Slider</a></li>
                                            <li class="menu-level-2"><a href="#">Video in header</a></li>
                                            <li class="menu-level-2"><a href="#">Image &amp; Video Slider</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-level-0"><a href="#"><span>Log Out</span></a></li>
                        </ul>
                    </div>
                    <!--/ Website Menu -->
                </div>

                <div class="col-sm-4">
                    <h6 class="foo">Search Box</h6>

                    <!-- search widget -->
                    <div class="widget-container widget_search styled boxed-velvet">
                        <div class="inner">
                            <form method="get" id="searchform2" action="#">
                                <div class="clearfix">
                                    <span class="btn btn-small"><input type="submit" id="searchsubmit2" value="Search" /></span>
                                    <div class="input_wrap"><input class="inputField" name="s" id="s2" placeholder="Search..."  value="" type="text" /></div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!--/ search widget -->
                </div>
            </div>
            <!--/ row -->

            <!-- row -->
            <div class="row">
                <div class="col-sm-4">
                    <h6 class="foo">Volume</h6>

                    <!-- Volume control -->
                    <div class="widget-knob widget-volume">
                        <input type="text" value="77"  autocomplete="off" id="volume" />
                        <script type="text/javascript">
                            $(document).ready(function() {
                                $('#volume').knobRot({
                                    'classes': ['volume'],
                                    'dragVertical': false,
                                    'frameCount': 49,
                                    'frameWidth': 149,
                                    'frameHeight': 149,
                                    'detent': true,
                                    'detentThreshold': 5,
                                    'minimumValue': 0,
                                    'maximumValue': 100,
                                    'hideInput': true
                                });
                            });
                        </script>
                    </div>
                    <!--/ Volume control -->
                </div>

                <div class="col-sm-4">
                    <h6 class="foo">Scroll Bars</h6>

                    <div class="scrollbars clearfix">
                        <!-- ScrollBars -->
                        <div class="scrollbar style2">
                            <p>These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.</p>
                        </div>
                        <div class="scrollbar style2">
                            <p>These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.</p>
                        </div>
                        <div class="scrollbar">
                            <p>These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.</p>
                        </div>
                        <!--/ ScrollBars -->
                    </div>
                </div>

                <div class="col-sm-4">
                    <h6 class="foo">Profile</h6>

                    <!-- Profile -->
                    <div class="widget-container widget_profile boxed-velvet">
                        <div class="inner">
                            <div class="widget_profile_top clearfix">
                                <div class="avatar"><img src="images/temp/avatar.png" alt="" /></div>
                                <h5>Victoria Lachetti</h5>
                                <span class="subtitle">Top model</span>
                                <div class="follow"><a href="#" class="btn btn-follow"><span>Follow</span></a></div>
                            </div>
                            <ul class="counters clearfix">
                                <li class="first"><a href="#"><p>530</p><span>Tweets</span></a></li>
                                <li><a href="#"><p>1450</p><span>Following</span></a></li>
                                <li class="last"><a href="#"><p>980</p><span>Followers</span></a></li>
                            </ul>
                        </div>
                    </div>
                    <!--/ Profile -->
                </div>
            </div>
            <!--/ row -->

            <!-- row -->
            <div class="row">

                <div class="col-sm-5">
                    <h6 class="foo">Message</h6>

                    <!-- comment form -->
                    <div class="add-comment add-comment-velvet styled" id="addcomments">
                        <div class="add-comment-title"><h3>New Message</h3></div>
                        <div class="comment-form">
                            <script type="text/javascript">
                                bkLib.onDomLoaded(function() {
                                    var myNicEditor = new nicEditor({
                                        buttonList : [
                                            'bold',
                                            'italic',
                                            'underline',
                                            'forecolor',
                                            'left',
                                            'center',
                                            'right',
                                            'justify'
                                        ]
                                    });
                                    myNicEditor.setPanel('edit_buttons');
                                    myNicEditor.addInstance('styled_message');
                                });
                                setTimeout(function () {
                                    var nic_width = $('.nicEdit-panel').width();
                                    $('.nicEdit-container').css('width', nic_width);
                                    $('.nicEdit-main').css('width', nic_width-24);
                                }, 2000);
                                $(window).resize(function() {
                                    var nic_width = $('.nicEdit-panel').width();
                                    $('.nicEdit-container').css('width', nic_width);
                                    $('.nicEdit-main').css('width', nic_width-24);
                                });
                            </script>
                            <form action="#" method="post" id="commentForm" class="ajax_form">

                                <div class="email-styled"><input type="text" name="email" id="email" value="" placeholder="Black@gmail.com" class="inputtext input_middle required" /></div>

                                <div class="form-inner">
                                    <div class="field_select">
                                        <label for="contact_name" class="label_title">Name:</label>
                                        <select name="contact_name" id="contact_name" multiple data-placeholder="Your Selection">
                                            <option value='example1@gmail.com'>Black Sabbath</option>
                                            <option value='example2@gmail.com'>Lana Ray</option>
                                            <option value='example3@gmail.com'>Toby Lightman</option>
                                            <option value='example4@gmail.com'>Lene Marlin</option>
                                            <option value='example5@gmail.com'>Deep Purple</option>
                                        </select>
                                    </div>
                                    <div class="field_text">
                                        <label for="subject" class="label_title">Subject:</label>
                                        <input type="text" name="subject" id="subject" value="" placeholder="Hello, Mike!" class="inputtext input_middle required" />
                                    </div>
                                    <div class="clear"></div>
                                    <div class="field_text field_textarea">
                                        <div id="edit_buttons" class="edit_buttons"></div>
                                        <label for="styled_message" class="label_title">Message:</label>
                                        <textarea cols="30" rows="10" name="styled_message" id="styled_message" class="textarea textarea_middle"></textarea>
                                    </div>
                                    <div class="clear"></div>
                                </div>

                                <div class="rowSubmit">
                                    <a onclick="document.getElementById('commentForm').reset();return false" href="#" class="link-reset btn btn-black"><span>Discard</span></a>
                                    <span class="btn btn-send"><input type="submit" id="send" value="Send Message" /></span>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!--/ comment form -->

                    <h6 class="foo">Image Slider</h6>

                    <!-- Image Slider -->
                    <div class="widget-container widget_gallery">
                        <div class="inner">
                            <div id="myCarousel" class="carousel slide" data-interval="20000">
                                <!-- Carousel items -->
                                <div class="carousel-inner">
                                    <div class="active item">
                                        <img src="images/temp/main-slider-2.jpg" alt="" />
                                        <div class="carousel-title"><h6>Brave animated series</h6><p>Disney Pixar</p></div>
                                    </div>
                                    <div class="item">
                                        <img src="images/temp/top-slider-2.jpg" alt="" />
                                        <div class="carousel-title"><h6>Horton</h6><p>Change your fate</p></div>
                                    </div>
                                    <div class="item">
                                        <img src="images/temp/top-slider-3.jpg" alt="" />
                                        <div class="carousel-title"><h6>Surf up</h6><p>Change your fate</p></div>
                                    </div>
                                    <div class="item">
                                        <img src="images/temp/top-slider-4.jpg" alt="" />
                                        <div class="carousel-title"><h6>Wall-e</h6><p>Disney Pixar</p></div>
                                    </div>
                                    <div class="item">
                                        <img src="images/temp/top-slider-1.jpg" alt="" />
                                        <div class="carousel-title"><h6>Ice Age</h6><p>Change your fate</p></div>
                                    </div>
                                </div>
                                <!-- Carousel indicators -->
                                <ol class="carousel-indicators">
                                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                    <li data-target="#myCarousel" data-slide-to="1"></li>
                                    <li data-target="#myCarousel" data-slide-to="2"></li>
                                    <li data-target="#myCarousel" data-slide-to="3"></li>
                                    <li data-target="#myCarousel" data-slide-to="4"></li>
                                </ol>
                                <!-- Carousel nav -->
                                <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
                                <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
                            </div>
                        </div>
                    </div>
                    <!--/ Image Slider -->
                </div>

                <div class="col-sm-5 col-sm-offset-2">
                    <h6 class="foo">Video Player</h6>

                    <!-- Video Player -->
                    <div class="video_player">
                        <div class="inner">
                            <video id="my_video_1" class="video-js vjs-default-skin" controls loop
                                   preload="auto" poster="images/temp/vjs_poster2.png"
                                   data-setup="{}">
                                <source src="http://test.themefuse.com/artiom/galapagos.mp4" type='video/mp4'>
                            </video>
                            <script>
                                _V_("my_video_1").ready(function(){
                                    var myPlayer = this;
                                    var aspectRatio = 192/380;
                                    var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
                                    myPlayer.width(width).height( width * aspectRatio );

                                    function resizeVideoJS(){
                                        var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
                                        myPlayer.width(width).height( width * aspectRatio );
                                    }
                                    resizeVideoJS();
                                    window.onresize = resizeVideoJS;
                                });
                            </script>
                        </div>
                    </div>
                    <!--/ Video Player -->

                    <div class="progressbars">
                        <h6 class="foo">Progress Bars</h6>

                        <!-- Progress Bar -->
                        <div id="progressBar1" class="progressbar">
                            <span class="mark-left">0%</span>
                            <span class="mark-right">100%</span>
                            <div class="percent"></div>
                            <div class="pbar"></div>
                            <div class="elapsed"></div>
                            <div class="remained"></div>
                        </div>
                        <script type="text/javascript">
                            $(document).ready(function() {
                                $('#progressBar1').anim_progressbar({
                                    totaltime: 90
                                });
                            });
                        </script>
                        <!--/ Progress Bar -->

                        <!-- Range slider -->
                        <div class="range-slider">
                            <input id="price_range" type="text" name="price_range" value="270;800">
                        </div>
                        <script type="text/javascript" >
                            jQuery(document).ready(function($) {
                                // Price Range Input
                                $("#price_range").rangeslider({
                                    from: 50,
                                    to: 1000,
                                    limits: false,
                                    scale: ['$50', '$1000'],
                                    heterogeneity: ['50/500'],
                                    step: 10,
                                    smooth: true,
                                    dimension: '$'
                                });
                            });
                        </script>
                        <!-- Range slider -->

                        <!-- Progress Bar with download Bar -->
                        <div id="progressBar2" class="progressbar style2">
                            <span class="mark-left">0%</span>
                            <span class="mark-right">100%</span>
                            <div class="percent"></div>
                            <div class="pbar">
                                <div id="downloadBar" class="downloadbar">
                                    <div class="pbar"></div>
                                </div>
                            </div>
                            <div class="elapsed"></div>
                            <div class="remained"></div>

                        </div>
                        <script type="text/javascript">
                            $(document).ready(function() {
                                $('#progressBar2').anim_progressbar({
                                    totaltime: 180
                                });
                                $('#downloadBar').anim_progressbar({
                                    totaltime: 120
                                });
                            });
                        </script>
                        <!--/ Progress Bar with download Bar -->
                    </div>

                    <h6 class="foo">Statistics</h6>

                    <!-- Simple Graph -->
                    <div class="widget-container widget_graph boxed-velvet">
                        <div class="inner">
                            <div id="graph" class="graph"></div>
                        </div>
                    </div>
                    <!--/ Simple Graph -->
                </div>
            </div>
            <!--/ row -->

            <!-- row -->
            <div class="row">
                <div class="col-sm-6">
                    <h6 class="foo">Buttons</h6>

                    <!-- Buttons -->
                    <div class="buttons-wrap">
                        <div class="buttons">
                            <a href="#" class="btn btn-left"><span>Right</span></a>
                            <a href="#" class="btn btn-pagination"><span>Download all files</span></a>
                            <a href="#" class="btn btn-right"><span>&nbsp;Left&nbsp;</span></a>
                        </div>

                        <div class="buttons">
                            <a href="#" class="btn btn-left btn-acute"><span>Right</span></a>
                            <a href="#" class="btn btn-acute"><span>Download all files</span></a>
                            <a href="#" class="btn btn-right btn-acute"><span>&nbsp;Left&nbsp;&nbsp;</span></a>
                        </div>

                        <div class="buttons">
                            <a href="#" class="btn btn-round"><span>Normal</span></a>
                            <a href="#" class="btn btn-round hover"><span>Hover</span></a>
                            <a href="#" class="btn btn-round active"><span>Pressed</span></a>
                        </div>
                    </div>
                    <!--/ Buttons -->
                </div>

                <div class="col-sm-6">
                    <h6 class="foo">Tabs</h6>

                    <!-- tabs -->
                    <div class="tabs_framed styled">
                        <div class="inner">
                            <ul class="tabs clearfix active_bookmark1">
                                <li class="active"><a href="#events" data-toggle="tab">Events</a></li>
                                <li><a href="#reminders" data-toggle="tab"><sup class="note">3</sup>Reminders</a></li>
                                <li><a href="#starred" data-toggle="tab">Starred</a></li>
                                <li><a href="#archive" data-toggle="tab">Archive</a></li>
                            </ul>

                            <div class="tab-content clearfix">
                                <div class="tab-pane clearfix fade in active" id="events">
                                    <div class="tab_image"><img src="images/temp/tabimage5.png" alt="" /></div>
                                    <h4>10 august 2012</h4>
                                    <p>He made his film debut with a mirror part in Black to the Future Part II</p>
                                    <a href="#" class="see-more"><span>Read More</span></a>
                                </div>
                                <div class="tab-pane clearfix fade" id="reminders">
                                    <div class="tab_image"><img src="images/temp/tabimage6.png" alt="" /></div>
                                    <h4>5 November 2012</h4>
                                    <p>He made his film debut with a mirror part in Black to the Future Part II</p>
                                    <a href="#" class="see-more"><span>Read More</span></a>
                                </div>
                                <div class="tab-pane clearfix fade" id="starred">
                                    <div class="tab_image"><img src="images/temp/tabimage7.png" alt="" /></div>
                                    <h4>11 October 2012</h4>
                                    <p>He made his film debut with a mirror part in Black to the Future Part II</p>
                                    <a href="#" class="see-more"><span>Read More</span></a>
                                </div>
                                <div class="tab-pane clearfix fade" id="archive">
                                    <div class="tab_image"><img src="images/temp/tabimage8.png" alt="" /></div>
                                    <h4>14 September 2012</h4>
                                    <p>He made his film debut with a mirror part in Black to the Future Part II</p>
                                    <a href="#" class="see-more"><span>Read More</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/ tabs -->
                </div>
            </div>
            <!--/ row -->

            <!-- row -->
            <div class="row">
                <div class="col-sm-8">
                    <!-- row level 2 -->
                    <div class="row">
                        <div class="col-sm-4">
                            <h6 class="foo">Dropdown</h6>

                            <!-- Dropdown Menu -->
                            <select class="select_styled select_styled_orange" name="contact_subject" id="contact_subject">
                                <option value="">Stage Select</option>
                                <option value="">Parking</option>
                                <option value="">Bar &amp; Restaurant</option>
                                <option value="">Residence</option>
                                <option value="">Parking</option>
                                <option value="">Bar &amp; Restaurant</option>
                                <option value="">Residence</option>
                                <option value="">House</option>
                            </select>
                            <!--/ Dropdown Menu -->
                        </div>

                        <div class="col-sm-6 col-sm-offset-2">
                            <h6 class="foo">Calendar</h6>

                            <!-- widget calendar-->
                            <div class="widget-container widget_calendar boxed-velvet">
                                <div class="inner">
                                    <input type="text" name="date_departure" class="inputField" value="" id="date_departure">
                                    <script>
                                        // <![CDATA[
                                        jQuery(document).ready(function($) {
                                            var daysRange = 5;

                                            function assignCalendar(id){
                                                $('<div class="calendar" />')
                                                        .insertAfter( $(id) )
                                                        .multiDatesPicker({
                                                            dateFormat: 'yy-mm-dd',
                                                            minDate: new Date(),
                                                            maxDate: '+1y',
                                                            altField: id,
                                                            firstDay: 1,
                                                            showOtherMonths: true
                                                        }).prev().hide();
                                            }

                                            assignCalendar('#date_departure');
                                        });
                                        // ]]>
                                    </script>
                                </div>
                            </div>
                            <!--/ widget calendar-->
                        </div>

                        <div class="col-sm-10">
                            <h6 class="foo">Comment</h6>

                            <!-- post comments -->
                            <div class="comment-list clearfix" id="comments">
                                <ol>
                                    <li class="comment">
                                        <div class="comment-body">
                                            <div class="inner">
                                                <div class="comment-arrow"></div>
                                                <div class="comment-avatar">
                                                    <div class="avatar"><img src="images/temp/avatar1.png" alt="" /></div>
                                                </div>
                                                <div class="comment-text">
                                                    <div class="comment-author clearfix">
                                                        <a href="#" class="link-author">Justin Timberlake</a> <span class="comment-date">June 26, 2013</span> | <a href="#addcomments" class="link-reply anchor">Reply</a>
                                                    </div>
                                                    <div class="comment-entry">
                                                        He made his film debut with a minor part in Back to the Future Part II (1989), then landed a succession.
                                                    </div>
                                                </div>
                                                <div class="clear"></div>
                                            </div>
                                        </div>
                                    </li>
                                </ol>
                            </div>
                            <!--/ post comments -->
                        </div>
                    </div>
                    <!--/ row level 2 -->
                </div>

                <div class="col-sm-4 col-md-3 col-md-offset-1">
                    <h6 class="foo">Audio Player</h6>

                    <!-- Widget Audio Player -->
                    <div class="widget-container widget-audio">
                        <div class="inner">
                            <!-- jplayer-->
                            <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                            <div id="jp_container_1" class="jp-audio">
                                <div class="jp-type-playlist">
                                    <div class="jp-playlist">
                                        <ul class="jp-playlist-inner">
                                            <li></li>
                                        </ul>
                                    </div>
                                    <div class="jp-gui jp-interface">
                                        <div class="song_title_wrap">
                                            <div class="song_title"></div>
                                        </div>
                                        <div class="jp-controls-wrap">
                                            <div class="jp-progress">
                                                <div class="jp-seek-bar">
                                                    <div class="jp-play-bar"></div>
                                                </div>
                                            </div>
                                            <ul class="jp-controls">
                                                <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li><!--
                                                        --><li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li><!--
                                                        --><li><a href="javascript:;" class="jp-previous disabled" tabindex="1">previous</a></li><!--
                                                        --><li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li><!--
                                                        --><li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li><!--
                                                        --><li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li><!--
                                                        --><li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li><!--
                                                        --><li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li><!--
                                                        --><li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li><!--
                                                        --><li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li><!--
                                                        --><li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li><!--
                                                        --><li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
                                            </ul>
                                            <div class="jp-volume-bar">
                                                <div class="jp-volume-bar-value"></div>
                                            </div>
                                            <div class="jp-current-time"></div>
                                            <div class="jp-duration"></div>
                                        </div>
                                    </div>
                                    <div class="jp-no-solution">
                                        <span>Update Required</span>
                                        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                                    </div>
                                </div>
                            </div>
                            <!--/ jplayer-->
                        </div>
                    </div>
                    <!-- Widget Audio Player -->

                    <h6 class="foo">Rating Stars</h6>

                    <!-- Rating Stars -->
                    <div class="rating clearfix">
                        <span class="star on"><input type="hidden" value="1"></span>
                        <span class="star on"><input type="hidden" value="2"></span>
                        <span class="star on"><input type="hidden" value="3"></span>
                        <span class="star off"><input type="hidden" value="4"></span>
                        <span class="star off"><input type="hidden" value="5"></span>
                    </div>
                    <!--/ Rating Stars -->
                </div>
            </div>
            <!--/ row -->

            <!-- row -->
            <div class="row">
                <div class="col-sm-12">
                    <h6 class="foo">Pricing</h6>

                    <!-- pricing1-->
                    <div class="pricing_box price_style1 clearfix">
                        <ul>

                            <li class="price_col">
                                <!--pricing item-->
                                <div class="price_item">
                                    <div class="inner">
                                        <div class="badge"></div>
                                        <div class="price_col_head">
                                            <span class="price"><em>$ 59</em><span>per month</span></span>
                                        </div>
                                        <div class="price_col_body clearfix">
                                            <div class="price_body_inner">
                                                <div class="price_body_top">
                                                    <strong>Basic</strong>
                                                    <span>Lots of clients &amp; users</span>
                                                </div>
                                                <ul>
                                                    <li>250 SKU’s</li>
                                                    <li>1 GB Storage</li>
                                                    <li>3,5% transaction fee</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="price_col_foot">
                                            <div class="sign_up"><a href="#" class="btn btn-large btn-black"><span>Try Now</span></a></div>
                                        </div>
                                    </div>
                                </div>
                                <!--/ pricing-item -->
                            </li>

                            <li class="price_col price_col_red col_active">
                                <!--pricing item-->
                                <div class="price_item">
                                    <div class="inner">
                                        <div class="badge"></div>
                                        <div class="price_col_head">
                                            <span class="price"><em>$ 299</em><span>per month</span></span>
                                        </div>
                                        <div class="price_col_body clearfix">
                                            <div class="price_body_inner">
                                                <div class="price_body_top">
                                                    <strong>Premium</strong>
                                                    <span>Lots of clients  & users</span>
                                                </div>
                                                <ul>
                                                    <li>2,500 SKU’s</li>
                                                    <li>5 GB Storage</li>
                                                    <li>1,5% transaction fee</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="price_col_foot">
                                            <div class="sign_up"><a href="#" class="btn btn-red btn-large"><span>Subscribe</span></a></div>
                                        </div>
                                    </div>
                                </div>
                                <!--/ pricing-item -->
                            </li>

                            <li class="price_col price_col_blue">
                                <!--pricing item-->
                                <div class="price_item">
                                    <div class="badge"></div>
                                    <div class="inner">
                                        <div class="price_col_head">
                                            <span class="price"><em>$ 499</em><span>per month</span></span>
                                        </div>
                                        <div class="price_col_body clearfix">
                                            <div class="price_body_inner">
                                                <div class="price_body_top">
                                                    <strong>Unlimited</strong>
                                                    <span>Lots of clients &amp; users</span>
                                                </div>
                                                <ul>
                                                    <li>Unlimited SKU’s</li>
                                                    <li>20 GB Storage</li>
                                                    <li>1% transaction fee</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="price_col_foot">
                                            <div class="sign_up"><a href="#" class="btn btn-large btn-black"><span>Try Now</span></a></div>
                                        </div>
                                    </div>
                                </div>
                                <!--/ pricing-item -->
                            </li>

                        </ul>
                    </div>
                    <!--/ pricing1-->
                </div>
            </div>
            <!--/ row -->

            <!-- row -->
            <div class="row">
                <div class="col-sm-3 col-sm-offset-1">
                    <h6 class="foo">Ribbons</h6>

                    <div class="ribbons">
                        <!-- Ribbons -->
                        <div class="ribbon"><span></span></div>
                        <div class="ribbon ribbon-red"><span></span></div>
                        <div class="ribbon ribbon-blue"><span></span></div>
                        <!--/ Ribbons -->
                    </div>
                </div>

                <div class="col-sm-4 col-sm-offset-1">
                    <h6 class="foo">Tags</h6>

                    <!-- tags -->
                    <div class="tagcloud margin-30">
                        <a href="#" class="tag-link-1" title="2 topics"><span>Design</span></a>
                        <a href="#" class="tag-link-2" title="3 topics"><span>Fashion Culture</span></a>
                        <a href="#" class="tag-link-5" title="9 topics"><span>Cinema</span></a>
                        <a href="#" class="tag-link-3" title="5 topics"><span>Electricity</span></a>
                        <a href="#" class="tag-link-4" title="8 topics"><span>Kitchen</span></a>
                        <a href="#" class="tag-link-6" title="3 topics"><span>Anniversaries</span></a>
                    </div>
                    <!--/ tags -->

                    <h6 class="foo">Badges</h6>

                    <div class="badges">
                        <!-- Badges -->
                        <div class="badge badge-outlet"></div>
                        <div class="badge badge-try"></div>
                        <div class="badge badge-popular"></div>
                        <!--/ Badges -->
                    </div>
                </div>

                <div class="col-sm-2 col-sm-offset-1">
                    <h6 class="foo">Controls</h6>

                    <div class="controls">
                        <!-- Controls -->
                        <div class="input_styled checklist pull-left"><div class="rowCheckbox checkbox-red"><input name="signup" checked type="checkbox" id="signup" value="signup"><label for="signup"></label></div></div>
                        <div class="input_styled checklist pull-left"><div class="rowCheckbox"><input name="signup2" checked type="checkbox" id="signup2" value="signup2"><label for="signup2"></label></div></div>
                        <div class="input_styled checklist pull-left"><div class="rowCheckbox"><input name="signup3" type="checkbox" id="signup3" value="signup3"><label for="signup3"></label></div></div>
                        <div class="clear"></div>
                        <div class="input_styled inlinelist pull-left"><div class="rowRadio radio-red"><input type="radio" name="signup4" value="radio_v1" id="radio_v1" checked><label for="radio_v1"></label></div></div>
                        <div class="input_styled inlinelist pull-left"><div class="rowRadio"><input type="radio" name="signup4" value="radio_v2" id="radio_v2"><label for="radio_v2"></label></div></div>
                        <div class="input_styled inlinelist pull-left"><div class="rowRadio"><input type="radio" name="signup4" value="radio_v2" id="radio_v3"><label for="radio_v3"></label></div></div>
                        <div class="clear"></div>
                        <div class="input_styled checklist foo-1"><div class="rowCheckbox checkbox-large"><input name="invoice" type="checkbox" checked id="invoice" value="invoice"><label for="invoice"></label></div></div>
                        <div class="input_styled checklist foo-2"><div class="rowCheckbox checkbox-large"><input name="invoice2" type="checkbox" id="invoice2" value="invoice2"><label for="invoice2"></label></div></div>
                        <!--/ Controls -->
                    </div>
                </div>
            </div>
            <!--/ row -->

        </div>
        <!--/ content -->
    </div>
    <!--/ container -->
</div>
</body>
</html>